<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { storeToRefs } from "pinia";
import { useDictionaryStore } from "../../store";
import { ApiStaff } from "../../api";
import { ElMessage, ElMessageBox } from "element-plus";
import StaffUpdate from "./StaffUpdate.vue";
import StaffAdd from "./StaffAdd.vue";

const { staffCategoryList } = storeToRefs(useDictionaryStore());
const search = reactive<API.Staff.List>({
  stf_name: "",
  stf_category: 0,
  begin: 0,
  pageSize: 7,
});
const list = ref<Array<UI.Staff>>([]);
const total = ref<number>();
onMounted(async () => {
  const data = await ApiStaff.list(search);
  list.value = data.list;
  total.value = data.total;
});
const updateList = async (currentPage: number = 1) => {
  search.begin = currentPage === 1 ? 0 : (currentPage - 1) * search.pageSize;
  const data = await ApiStaff.list(search);
  list.value = data.list;
  total.value = data.total;
};
const queryHandler = async () => {
  await updateList();
};
const dimisssionHandler = async (id: number) => {
  await ElMessageBox.confirm("确定要离职吗？", "提示", { type: "warning" });
  await ApiStaff.dimission(id);
  ElMessage({ message: "离职成功", type: "success" });
  await updateList();
};
const reinstateHanler = async (id: number) => {
  await ElMessageBox.confirm("确定要离职吗？", "提示", { type: "warning" });
  await ApiStaff.reinstate(id);
  ElMessage({ message: "复职成功", type: "success" });
  await updateList();
};
const updateRef = ref<InstanceType<typeof StaffUpdate> | null>(null);
const addRef = ref<InstanceType<typeof StaffAdd> | null>(null);
</script>

<template>
  <el-form ref="form" :model="list" label-width="80px">
    <el-form-item label="姓名：">
      <el-input
        v-model="search.stf_name"
        placeholder="请输入要查询的名字"
        style="width: 180px"
      ></el-input>
    </el-form-item>
    <el-form-item label="岗位">
      <el-select
        v-model="search.stf_category"
        style="width: 180px"
        placeholder="--请选择--"
      >
        <el-option :label="'全部'" :value="0"></el-option>
        <el-option
          v-for="item in staffCategoryList"
          :key="item.dic_id"
          :label="item.dic_name"
          :value="item.dic_id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="queryHandler">查询</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="list">
    <el-table-column type="index" label="序号" width="80"></el-table-column>
    <el-table-column label="姓名" prop="stf_name"></el-table-column>
    <el-table-column label="岗位" prop="stf_category">
      <template #default="scoped">
        {{
          staffCategoryList?.find(
            (item) => item.dic_id === scoped.row.stf_category
          )?.dic_name
        }}
      </template>
    </el-table-column>
    <el-table-column label="备注" prop="stf_remark"></el-table-column>
    <el-table-column label="在职状态" prop="stf_invalid">
      <template #default="scoped">
        <el-tag type="success" v-if="scoped.row.stf_invalid === 1">在职</el-tag>
        <el-tag type="danger" v-else>离职</el-tag>
      </template>
    </el-table-column>

    <el-table-column>
      <template #header>
        <el-button @click="addRef?.begin()" type="warning">新增</el-button>
      </template>
      <template #default="{ row }">
        <el-button
          type="info"
          v-if="row.stf_invalid === 1"
          @click="dimisssionHandler(row.stf_id)"
          >离职</el-button
        >
        <el-button type="success" v-else @click="reinstateHanler(row.stf_id)"
          >复职</el-button
        >
        <el-button type="primary" @click="updateRef?.begin(row)"
          >修改</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="page">
    <el-pagination
      v-model:page-size="search.pageSize"
      :total="total"
      layout="jumper,prev,pager,next,->,total,sizes,slot"
      :page-sizes="[3, 4, 6, 7, 16]"
      @change="updateList"
    ></el-pagination>
  </div>
  <staff-update ref="updateRef" @save="updateList()" />
  <staff-add ref="addRef" @save="updateList()" />
</template>

<style scoped>
.el-form {
  display: flex;
  margin-bottom: 20px;
}
.page{
  position: absolute;
  bottom: 20px;
  width: calc(100% - 40px);
}
</style>
